<div id="contacts-list">

    <div class="overflow-x-auto">
        <table class="table table-zebra table-pin-rows">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Document</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody id="contact-table-body">
            {% if contacts %}
                {% for contact in contacts %}
                    {% include 'partials/contact-row.html' %}
                {% endfor %}
            {% else %}
                <tr class="no-contact-row">
                    <td colspan="5">
                        <div role="alert" class="alert alert-info">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 class="h-6 w-6 shrink-0 stroke-current">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>No contacts found.</span>
                        </div>
                    </td>
                </tr>
            {% endif %}
            </tbody>
        </table>
    </div>
</div>